<!--
 * @Author: yao
 * @Date: 2024-11-19 20:46:23
 * @LastEditTime: 2025-02-05 23:33:34
 * @LastEditors: yao
 * @Description: 
 * @FilePath: \jdev-web-el\src\views\System\404.vue
-->
<template>
  <div class="container">
    <svg class="text-container" width="800" height="120" viewBox="0 0 800 120">
      <!-- 背景装饰元素 -->
      <circle class="decoration" cx="50%" cy="50%" r="60" fill="none" stroke-width="2" />
      <path class="decoration" d="M100,60 Q200,30 300,60 T500,60" fill="none" stroke-width="1" />

      <!-- 文字内容 -->
      <g class="text-animate">
        <text x="10" y="60">让</text>
        <text x="80" y="60">智</text>
        <text x="150" y="60">慧</text>
        <text x="220" y="60">医</text>
        <text x="290" y="60">疗</text>
        <text x="360" y="60">触</text>
        <text x="430" y="60">手</text>
        <text x="500" y="60">可</text>
        <text x="570" y="60">得</text>
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.container {
  background: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  margin: 0;
}

.text-container {
  position: relative;
}

.text-animate {
  font: 600 3em 'Microsoft YaHei', sans-serif;
  fill: none;
  stroke-width: 2;
  animation: colorChange 2s infinite alternate;
}

.text-animate text {
  opacity: 0;
  animation: fadeUp 0.8s forwards, bounce 1s infinite 1s;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes colorChange {
  0% {
    stroke: #00f3ff;
    filter: drop-shadow(0 0 5px #00f3ff);
  }

  100% {
    stroke: #7a63ff;
    filter: drop-shadow(0 0 15px #7a63ff);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* 为每个字设置不同的动画延迟 */
text:nth-child(1) {
  animation-delay: 0.1s;
}

text:nth-child(2) {
  animation-delay: 0.3s;
}

text:nth-child(3) {
  animation-delay: 0.5s;
}

text:nth-child(4) {
  animation-delay: 0.7s;
}

text:nth-child(5) {
  animation-delay: 0.9s;
}

text:nth-child(6) {
  animation-delay: 1.1s;
}

text:nth-child(7) {
  animation-delay: 1.3s;
}

text:nth-child(8) {
  animation-delay: 1.5s;
}

/* 背景装饰动画 */
.decoration {
  stroke: rgba(122, 99, 255, 0.3);
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>